<template>
  <div class="person">
    <h2>情况三：监视【reactive】 定义的 【对象类型】数据</h2>
    <h2>姓名：{{ person.name }}</h2>
    <h2>姓名：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from "vue"

let person = reactive({
  name: '张三',
  age: 19
})

function changeName() {
  person.name += '~'
}

function changeAge() {
  person.age += 1
}

function changePerson() {
  person = Object.assign(person, { name: '张飞2', age: 24 })
}

//情况三：监视【reactive】 定义的 【对象类型】数据 默认开启深度监视（隐式开启的）
watch(person,(newVal,oldVal)=>{
  console.log('变化了',newVal,oldVal);
})



</script>


<style lang="scss" scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  color: white;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>
